<html>
	<head>
		<link rel="stylesheet" href="/static/layui/css/layui.css"  media="all">
		<link rel="stylesheet" href="/static/cloud/css/cloud.css" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<script src="/static/layui/layui.js"></script>
		<title>私人云盘</title>
	</head>
	<body>
		<style type="text/css">
			body {
				background: #f2f2f2;
			}
		
			#cloud-content {
				height: calc(100% - 60px);
				overflow: auto
			}
		
			.password-title {
				margin: 10px 0;
			}
		
			.password-input {
				width: calc(100% - 50px);
				display: inline-block;
			}
		
			.password-btn {
				text-align: center;
				margin-left: 10px;
				cursor: pointer;
			}
		
			#password_part, #file_notfound{
				width: 300px;
				border-radius: 0.5rem;
				top: calc(50% - 58px);
				position: absolute;
				left: calc(50% - 150px);
				padding: 20px
			}

			
		
			#file_info {
				position: absolute;
				left: 10%;
				top: 10%;
				width: 80%;
				height: 80%;
			}
		
			.file-info-img {
				/* background: pink; */
				height: 80px;
				width: 80px;
				margin: 0 auto;
			}

			.file-info-img img{
				width: 80px;
			}
		
			.file-info-name {
				text-align: center;
			}
		
			.layui-card-content {
				padding: 50px 0;
				height: 50%;
			}

			.expiration-time{
				margin-left: 15px;
			}

			h2{
				margin-bottom: 10px;
				color: #424242;
				/* font-weight: 600; */
			}

			.layui-card-header .layui-inline{
				margin-top: 7px;
			}

			#btn_extractCode_sure{
				color: #03A9F4;
			}
			
		
			@media (max-width: 500px) {
				#password_part {
					width: 80%
				}
			}
		</style>
		<div id='cloud-content'>
			<style type="text/css">
				.tool-bar {
					margin-bottom: 20px
				}
			</style>

			<!-- 文件详情模板 -->
			<div id="file_info" class="layui-hide layui-anim layui-anim-fadein">
				
				<div class="cloud-card tool-bar">
					<h2>--</h2>
					<div class="layui-inline" style="color: #a9a9a9;">
						<div class="layui-inline"><i class="layui-icon layui-icon-time"></i></div>
						<div class="layui-inline" id="text_share_time">----</div>
						<div class="layui-inline expiration-time">过期时间：</div>
						<div class="layui-inline">永久有效</div>
						
					</div>
					
					<!-- <a href="">保存到网盘</a> -->
				</div>
				<div class="layui-card">
					<div class="layui-card-header">
						<div class="layui-inline">
							<btn class="layui-btn-sm layui-btn layui-btn-primary layui-border-blue" id="btn_download">下载</btn>
							<!-- <btn class="layui-btn-sm layui-btn layui-btn-primary layui-border-blue">保存到网盘</btn> -->
						</div>
						
					</div>
					<div class="layui-card-content">
						<div class="file-info-img">
							<img src="" onerror="this.src='/static/layui_extends/fileManager/img/none.png'">
						</div>
						<div class="file-info-name" id="text_file_name">--</div>
					</div>
				</div>
			</div>

			<!-- 提取码模板 -->
			<div id="password_part" class="cloud-card layui-anim layui-anim-fadein layui-hide">
				<div class="password-title">
					请输入提取码查看分享的文件
				</div>
		
				<div>
					<div class="password-input">
						<input type="text" id="input_extractCode" placeholder="请输入提取码" class="layui-input">
					</div>
					<div class="layui-inline password-btn">
						<div id="btn_extractCode_sure">提取</div>
					</div>
		
				</div>
			</div>

			<div id="file_notfound" class="cloud-card layui-anim layui-anim-fadein layui-hide">
				
				
				<div class="notfound" style="font-size: 1.1rem;"><i class="layui-icon layui-icon-face-cry" style="font-size: 2rem;"></i> . . . 该分享链接不存在或已失效！ </div>
				<!-- <button onclick="javascript:window.opener=null;window.close();">关闭页面</button> -->
			</div>
		</div>
		
		<div id='template-content' class="layui-hide"></div>



		<script>	
			var app;
				layui.config({
					base: '/static/layui_extends/'
					, version: true//禁止浏览器缓存，此处建议禁止
				})
				layui.use(['layer', 'jquery', 'app', 'my_base'], function () {
					var $ = layui.jquery
						, layer = layui.layer;
					app = layui.app;
					var pageSartTime= Date.parse(new Date()) / 1000;
					var extractCode;
					app.init({
						contentElemId: 'cloud-content'
					})
					var only_tag= /(\S*)/.exec(decodeURIComponent(app.parseUrl().file))[0];//解码并正则匹配分享文件标识
					var postData={};
					var visit_statistics=false;
					postData['onlyTag']= only_tag;
					// 判断文件是否需要提取码
					app.ajaxPost('/api/share/receive/getInfoByOnlyTag',postData,function(res){
						// console.log(res);
						var d = res.data
						if(res.err_code==1){
							page(3);
						}else if (res.err_code == 2){
							page(1);
						} else if (res.err_code == 0) {
							show_file_info(d.file_name, d.share_time, d.size);
						} else {
							page(3)
						}
					})

					// 下载文件
					$('#btn_download').click(function(){
						if(Date.parse(new Date()) / 1000-pageSartTime>300){
							layer.alert('页面超时,点击确定刷新页面',function(){
								location.reload();
							});return;
						}
						var postData = {};
						app.ajaxPost('/api/share/receive/getDownloadUrl', postData, function (res) {
							
							var d = res.data
							if (res.err_code == 1) {
								page(3);
							} else if (res.err_code == 2) {
								layer.msg('提取码不正确');
							} else if (res.err_code == 0) {
								location.href= d.download_url;
							}else{
								layer.alert('页面超时', function () {
									location.reload();
								});
							}
						})
					})
					
					// 输入提取码
					$('#btn_extractCode_sure').click(function(){
						extractCode= $('#input_extractCode').val();
						if(extractCode==''){
							layer.msg('请输入提取码');
							return;
						}
						
						var postData={};
						postData['onlyTag'] = only_tag;
						postData['extractCode'] = extractCode;
						app.ajaxPost('/api/share/receive/getInfoByOnlyTag', postData, function (res) {
							// console.log(res);
							var d=res.data
							if (res.err_code == 1) {
								page(3);
							} else if (res.err_code == 2) {
								layer.msg('提取码不正确');
							} else if (res.err_code == 0) {
								show_file_info(d.file_name,d.share_time,d.size);
							}
						})
					})

					// 显示文件详情页面
					function show_file_info(file_name,share_time,size){
						page(2);
						$('title').html(file_name+' - 私人云盘');
						$('h2').html(file_name);
						$('#text_file_name').html(file_name);
						$('#text_share_time').html(share_time);
						$('#btn_download').html("下载("+app.bytesToSize(size)+")");
						var ext=file_name.substring(file_name.lastIndexOf('.') + 1);
						$('.file-info-img img').attr('src', '/static/layui_extends/fileManager/img/'+ ext +'.png');
						if(!visit_statistics){
							visit_statistics=true;
							// 访问统计
							app.ajaxPost('/api/share/receive/addVisitTimes/',{onlyTag: only_tag} );
						}
					}


					// 跳转页面
					function page(code){
						// 输入提取码页面
						if(code == 1){
							$('title').html('请输入提取码 - 私人云盘');
							$('#file_info').addClass('layui-hide');
							$('#password_part').removeClass('layui-hide');
							
						}else if(code == 2){
							// 文件详情
							$('#password_part').addClass('layui-hide');
							$('#file_info').removeClass('layui-hide');
						} else if (code == 3) {
							// 文件不存在
							$('title').html('分享链接失效 - 私人云盘');
							$('#password_part').addClass('layui-hide');
							$('#file_info').addClass('layui-hide');
							$('#file_notfound').removeClass('layui-hide');
						}
						
					}
				})
			</script>
		</script>
	</body>
</html>